<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('合作伙伴用户列表')" />
    <!--<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet">-->
    <link href="../static/css/bootstrap-select.min.css" th:href="@{/css/bootstrap-select.min.css}" rel="stylesheet"/>
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li class="select-time">
                                <label>创建时间：</label>
                                <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginCreateTime]"/>
                                <span>-</span>
                                <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endCreateTime]"/>
                            </li>
                            <!--<li>
                                <label>姓名：</label>
                                <input type="text" name="userName"/>
                            </li>-->
                            <!--<li>
                                <label>公司：</label>
                                <input type="text" name="userCompany"/>
                            </li>-->
                            <li>
                                <label>电话：</label>
                                <input type="text" name="userPhone"/>
                            </li>
                            <li style="width: 700px;">
                                <label style="width: 100px;">客户区域：</label>
                                <div class="col-sm-8">
                                    <select class="selectpicker form-control" onchange="initCity()" id="userProvinceCode" name="userProvinceCode">
                                        <option value="">--省份--</option>
                                    </select>
                                    <select class="selectpicker form-control" onchange="initRegion()" id="userCityCode" name="userCityCode">
                                        <option value="">--城市--</option>
                                    </select>
                                    <select class="selectpicker form-control" id="userCountyCode" name="userCountyCode">
                                        <option value="">--县区--</option>
                                    </select>
                                </div>
                            </li>
                            <!--<li>
                                <label>客户省份：</label>
                                <input type="text" name="userProvince"/>
                            </li>
                            <li>
                                <label>客户城市：</label>
                                <input type="text" name="userCity"/>
                            </li>
                            <li>
                                <label>客户区域：</label>
                                <input type="text" name="userCounty"/>
                            </li>-->
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="resetForm()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                <a class="btn btn-danger btn-rounded btn-sm" onclick="$.table.exportExcel()">
                                    <i class="fa fa-download"></i> 导出
                                </a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <!--<div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="cngj:user:add">
                    <i class="fa fa-plus"></i> 添加
                </a>
                <a class="btn btn-primary single disabled" onclick="$.operate.edit()" shiro:hasPermission="cngj:user:edit">
                    <i class="fa fa-edit"></i> 修改
                </a>
                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" shiro:hasPermission="cngj:user:remove">
                    <i class="fa fa-remove"></i> 删除
                </a>
                <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="cngj:user:export">
                    <i class="fa fa-download"></i> 导出
                </a>
            </div>-->
            <div class="col-sm-12 select-table table-bordered">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
     <th:block th:include="include :: jquery-cxselect-js" />
     <!--<script th:src="@{/js/bootstrap-select1.min.js}"></script>-->
     <script src="../static/js/bootstrap-select.min.js" th:src="@{/js/bootstrap-select.min.js}"></script>
     <!--<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>-->
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('cngj:user:edit')}]];
        var removeFlag = [[${@permission.hasPermi('cngj:user:remove')}]];
        var prefix = ctx + "cngj/user";

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                modalName: "合作伙伴用户",
                columns: [{
                    field : 'Number',
                    title : '序号',
                    align: 'center',
                    width: 20,
                    formatter : function(value, row, index) {
                        var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                    }
                },
                {
                    field: 'id',
                    title: '合作伙伴用户',
                    align: "center",
                    visible: false
                },
                    {
                        field: 'userProvince',
                        align: "center",
                        title: '省份'
                    },
                    {
                        field: 'userCity',
                        align: "center",
                        title: '城市'
                    },
                    {
                        field: 'userCounty',
                        align: "center",
                        title: '区（县）'
                    },
                {
                    field: 'userName',
                    align: "center",
                    title: '姓名'
                },
                {
                    field: 'userCompany',
                    align: "center",
                    title: '公司'
                },
                {
                    field: 'userPhone',
                    align: "center",
                    title: '电话'
                },
                    {
                        field: 'createTime',
                        align: "center",
                        title: '填写时间'
                    },
                ]
            };
            $.table.init(options);
        });

        function resetForm(){
            $.form.reset();
            // 地区下拉框初始化
            $("#userProvinceCode").selectpicker({width:130, liveSearch: true, liveSearchPlaceholder: "搜索" });
            $("#userCityCode").selectpicker({width:120, liveSearch: true, liveSearchPlaceholder: "搜索" });
            $("#userCountyCode").selectpicker({width:120, liveSearch: true, liveSearchPlaceholder: "搜索" });

            // 动态加载省份选项数据
            initSelectOptions("userProvinceCode","0");
            initSelectOptions("userCityCode","11111");
            initSelectOptions("userCountyCode","11111");
        }

        $(document).ready(function(){
            // 地区下拉框初始化
            $("#userProvinceCode").selectpicker({width:130, liveSearch: true, liveSearchPlaceholder: "搜索" });
            $("#userCityCode").selectpicker({width:120, liveSearch: true, liveSearchPlaceholder: "搜索" });
            $("#userCountyCode").selectpicker({width:120, liveSearch: true, liveSearchPlaceholder: "搜索" });

            // 动态加载省份选项数据
            initSelectOptions("userProvinceCode","0");
        });// onReady

        /**
         * 动态生成select选项
         * @param selectId
         * @returns
         */
        function initSelectOptions(selectId,parentId) {
            var selectObj = $("#" + selectId);
            $.ajax({
                url : "user/"+parentId,
                async : false,
                type : "GET",
                success : function(result) {
                    debugger;
                    var configs = result.rows;
                    selectObj.find("option:not(:first)").remove();
                    for (var i in configs) {
                        var addressConfig = configs[i];
                        var optionValue = addressConfig.id;
                        var optionText = addressConfig.areaName;
                        selectObj.append(new Option(optionText, optionValue));
                    }
                    debugger;
                    // 刷新select
                    selectObj.selectpicker('refresh');
                },
                error : function(result) {
                    toastr.error('获取['+ parentId + ']信息失败，原因：' + result.errorMessage);
                }
            });// ajax
        }

        /**
         * 根据选择的省份动态初始化城市options
         * @returns
         */
        function initCity() {
            // 当省份变动时，初始化城市和清空县区和街道
            var provinceSel = $("#userProvinceCode").val();
            initSelectOptions("userCityCode", provinceSel);
            $("#userCountyCode").find("option:not(:first)").remove();
            $("#userCountyCode").selectpicker('refresh');
            /* $("#street").find("option:not(:first)").remove();
             $("#street").selectpicker('refresh');*/
        }

        /**
         * 根据选择的城市动态初始化区域options
         * @returns
         */
        function initRegion() {
            // 选择城市
            var citySel = $("#userCityCode").val();
            initSelectOptions("userCountyCode", citySel);
        }


    </script>
</body>
</html>